<template>
    <div class="app-container">
        <!-- 查看或者编辑页面 -->
        <div class="main-left">
            <el-form :model="form" ref="form" label-width="100px" v-loading="formLoading" :rules="rules" >
                <el-form-item label="" prop="imagePath" v-show="!flag">
                    <div style="margin-left:80px">
                        <el-avatar :size="80" :src="form.imagePath"></el-avatar>
                    </div>
                </el-form-item>
                <el-form-item label="创建时间：" v-show="!flag"  prop="createTime">
                    <el-input v-model="form.createTime" :disabled="!flag" style="width:300px"></el-input>
                </el-form-item>
                <el-form-item label="账号："  prop="account" required >
                    <el-input v-model="form.account" :disabled="!flag" style="width:300px"></el-input>
                </el-form-item>
                <el-form-item label="密码：" v-show="flag" required >
                    <el-input :type="passwordType" v-model="form.password" style="width:300px" ></el-input>
                    <span class="show-pwd" @click="showPwd">
                        <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
                    </span>
                </el-form-item>
                <el-form-item label="用户名：" prop="username"   required>
                    <el-input v-model="form.username" :disabled="!flag" style="width:300px"></el-input>
                </el-form-item>
                <el-form-item label="性别：">
                    <el-select v-model="form.sex" placeholder="性别" clearable :disabled="!flag">
                    <el-option v-for="item in sexEnum" :key="item.key" :value="item.key" :label="item.value"></el-option>
                </el-select>
                </el-form-item>
                <el-form-item label="生日：">
                    <el-date-picker v-model="form.birthDay" :disabled="!flag" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"/>
                </el-form-item>
                <el-form-item label="邮箱：" >
                    <el-input v-model="form.userEmail" :disabled="!flag" style="width:300px"></el-input>
                </el-form-item>
                <el-form-item label="状态：" required>
                    <el-select v-model="form.userStatus" placeholder="状态" :disabled="!flag">
                    <el-option v-for="item in statusEnum" :key="item.key" :value="item.key" :label="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm">{{flag  ? '提交' : '关闭' }}</el-button>
                    <el-button @click="resetForm" v-show="flag">重置</el-button>
                    <el-button @click="close" v-show="flag">关闭</el-button>
                </el-form-item>
            </el-form>
        </div>     
    </div>
</template>

<script>
import {getUserById,updateUser} from '@/api/user/student'
import { mapGetters,mapState } from 'vuex';
export default {
    name: 'editTeacher',
    mounted(){
        // 找单个路由要信息
        let id = this.$route.query.id;
        let msg = this.$route.query.msg;
        if(msg == 'view'){
            this.flag = false;
        }else{
            this.flag = true;
        }
        if(id && parseInt(id) !== 0){
            getUserById(id).then(resp=>{
                this.form = resp.data;
            });
        }
        this.form.password = '';
        this.form.account = '';
        console.log(id,msg);
        console.log(this.form);
        
    },
    created(){
        this.resetForm();
        console.log(this.form);
    },
    data(){
        // const validatePass = (rule,value,callback) =>{
        //     if(value.length < 6){
        //         callback(new Error('密码不符合规则'));
        //     }else{
        //         callback();
        //     }
        // } 
        return{
            form: {
                id: null,
                account: '',
                password: '',
                username: '',
                imagePath: '',
                sex : 0,
                birthDay: '',
                userEmail: '',
                userStatus: 0,
                createTime: '',
                role: 1,
            },
            passwordType: 'password',
            formLoading: false,
            // 是否为编辑/新增的标志
            flag: true,
            rules: {
                account: [
                { required: true, message: '请输入账号', trigger: 'blur' }
                ],
                username: [
                { required: true, message: '请输入姓名', trigger: 'blur' }
                ]
            }
        }
    },
    methods:{
        resetForm(){
            this.form.id = null;
                this.form.account ='',
                this.form.password='',
                this.form.username='',
                this.form.imagePath='',
                this.form.sex= 0,
                this.form.birthDay= '',
                this.form.userEmail= '',
                this.form.userStatus= 0,
                this.form.createTime= '',
                this.form.roel = 1;
        },
        submitForm(){
            if(!this.flag){
                this.$router.push('/user/teacher')
            }else{
                this.$refs.form.validate((valid) => {
                    if(valid){
                        this.formLoading = true;
                        updateUser(this.form).then((resp) =>{
                            console.log(resp.code);
                            if(resp.code == 200){
                                this.$message.success(resp.message);
                                this.$router.push('/user/teacher')
                            }else{
                                this.$message.error(resp.message);
                                this.formLoading = false;
                            }
                        }).catch(e=>{
                            this.formLoading = false;
                        })
                    }else{
                        return false;
                    }
                })
            }
        },
        showPwd() {
            if (this.passwordType === 'password') {
                this.passwordType = ''
            } else {
                this.passwordType = 'password'
            }
        },
        close(){
            this.$router.push('/user/teacher');
        }
    },
    computed:{
        ...mapGetters('enumItem',['enumFormat']),
        ...mapState('enumItem',{
            sexEnum: state => state.user.sexEnum,
            statusEnum: state => state.user.statusEnum,
            roleEnum: state => state.user.roleEnum
        })
    }
}
</script>

<style scoped>
    .main-left{
        float: left;
        margin-left: 10%;
    }
    .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
    }
    .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    }
    .avatar {
    width: 100px;
    height: 100px;
    display: block;
    border-left: 2px;
    border-radius: 50%;
    }
    .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: #889aa4;
    cursor: pointer;
    user-select: none;
    } 
</style>